import './index.less';
declare const Cesium: any;
import { Start } from './routes/start/start';
import { AComponent, IComponent, IWindowSizeChange, IAfterViewInit } from './core/component';
import { S01 } from './routes/webgl/s01';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { S02 } from './routes/webgl/s02';
import { S03 } from './routes/webgl/s03';
import { S04 } from './routes/webgl/s04';
import { S05 } from './routes/webgl/s05';
const routes: {route: string, name: string, component: {new (...args: any[]):AComponent}}[] = [
    {
        route: '/',
        name: 'cesium/01',
        component: Start
    },
    {
        route: '/webgel_s01',
        name: 'webgel/01',
        component: S01
    },
    {
        route: '/webgel_s02',
        name: 'webgel/02',
        component: S02
    },
    {
        route: '/webgel_s03',
        name: 'webgel/03',
        component: S03
    },
    {
        route: '/webgel_s04',
        name: 'webgel/04',
        component: S04
    },
    {
        route: '/webgel_s05',
        name: 'webgel/05',
        component: S05
    }
];
let str = '';
routes.forEach(item => {
    // @ts-ignore
    if(item.component.desc) {
        // @ts-ignore
        str += `<a href="${item.route}" title="${item.component.desc}">${item.name}-${item.component.desc}</a>`;
        // @ts-ignore
        document.querySelector('title').innerText = item.name.replace('webgel/', 'webgl_')+'_'+item.component.desc;
    } else {
        str += `<a href="${item.route}">${item.name}</a>`;
    }
})
const template = `
    <div class="container">
        <div class="visual-icon greencircle">
        </div>
        <div class="leftbar hidden">
            ${str}
        </div>
        <div class="content">
            <div class="cesium-content" id="cesium-content-id"></div>
        </div>
    </div>
`;

window.onload = async function() {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmOTg3YzJiNC04NmMxLTQwNjUtYTdhMS02NmI1MTAzNjljNDYiLCJpZCI6NDA0NzQsImlhdCI6MTYwODc5NzEyN30.ovp_DHEFtuir2tFA_763hpdGYHxBpaI64qRPdMxFoX8';
    let bodyDom = document.querySelector('body');
    bodyDom.innerHTML = template;
    let contentDom = document.querySelector('.content') as HTMLDivElement;
    let navContent = document.querySelector('.leftbar') as HTMLDivElement;
    let visualBtn = document.querySelector('.visual-icon') as HTMLDivElement;

    let curentRoutPath = location.pathname;
    let gisDom = document.querySelector('.cesium-content') as HTMLDivElement;
    let Enter: AComponent&IComponent&Partial<IWindowSizeChange>&Partial<IAfterViewInit>;
    for(let router of routes) {
        if(curentRoutPath == router.route) {
            Enter = new router.component(gisDom, 'cesium-content-id');
            document.querySelector('.leftbar').querySelector(`[href='${router.route}']`).className = 'active';
            break;
        }
    }
    if(!Enter) {
        Enter = new Start(gisDom, 'cesium-content-id');
        document.querySelector('.leftbar').querySelector(`[href='/']`).className = 'active';
    }
    await Enter.init();
    let dom = Enter.render();
    if(dom) {
        contentDom.append(dom);
    }
    if(Enter.afterviewInit) {
        Enter.afterviewInit();
    }
    visualBtn.addEventListener('click', () => {
        if(navContent.className.indexOf('hidden') == -1) {
            navContent.className = 'leftbar hidden';
        } else {
            navContent.className = 'leftbar';
        }
        Enter.windowSizeChange()
    })
    fromEvent(window, 'resize').pipe(debounceTime(1000)).subscribe(ev => {
        if(Enter.windowSizeChange) {
            Enter.windowSizeChange(ev)
        }
    });
}